<template>
  <view>
    <view class="title"> 计算你的身体质量指数 (BMI) </view>
    <!-- 查询表单 -->
    <view class="form">
      <uni-forms
        ref="valiForm"
        :rules="Rules"
        :model="form"
      >
        <uni-forms-item
          label-width="80px"
          label="我的身高"
          required
          name="height"
        >
          <uni-easyinput
            trim="all"
            :clearable="false"
            v-model="form.height"
            placeholder="请在此输入身高,单位为厘米(CM)"
          />
        </uni-forms-item>
        <uni-forms-item
          label-width="80px"
          label="我的体重"
          required
          name="weight"
        >
          <uni-easyinput
            trim="all"
            :clearable="false"
            v-model="form.weight"
            placeholder="请在此输入身高,单位为千克(KG)"
          />
        </uni-forms-item>
        <uni-forms-item
          label-width="75px"
          label="BMI标准"
          name="standard"
        >
          <uni-data-select
            v-model="form.value"
            :localdata="form.standard"
            :clear="false"
          ></uni-data-select>
        </uni-forms-item>
      </uni-forms>
      <van-toast id="van-toast" />
      <van-button
        type="primary"
        class="computing"
        size="small"
        @click="handleClick('valiForm')"
      >
        计算BMI
      </van-button>
      <van-button
        class="select"
        type="info"
        size="small"
        @click="showPopup = true"
      >
        查看BMI参考表
      </van-button>
    </view>
    <!-- 历史记录 -->
    <view v-if="BMIData.length">
      <view class="title">我的BMI历史记录</view>
      <!-- 柱状图 -->
      <view
        class="charts-box"
        :class="showPopup ? 'hidden-canvas' : ''"
      >
        <qiun-data-charts
          type="column"
          :opts="opts"
          :chartData="chartData"
        />
      </view>
      <uni-table
        border
        stripe
      >
        <uni-tr>
          <uni-th width="35">序号</uni-th>
          <uni-th width="50">日期</uni-th>
          <uni-th width="35">身高(CM)</uni-th>
          <uni-th width="35">体重(KG)</uni-th>
          <uni-th width="10">BMI</uni-th>
          <uni-th width="80">操作</uni-th>
        </uni-tr>
        <uni-tr
          v-for="(item, index) in BMIData"
          :key="index"
        >
          <uni-td>{{ index + 1 }}</uni-td>
          <uni-td>{{ item.date }}</uni-td>
          <uni-td>{{ item.height }}</uni-td>
          <uni-td>{{ item.weight }}</uni-td>
          <uni-td>{{ item.BMI }}</uni-td>
          <uni-td>
            <button
              class="uni-button"
              @click="handleDelete(item)"
              size="mini"
              type="warn"
            >
              删除
            </button>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <!-- 体重指数(BMI)标准参考表 -->
    <van-popup
      :show="showPopup"
      round
      position="center"
      custom-style="height: 50%"
      :closeable="true"
      @close="showPopup = false"
    >
      <view class="title"> 体重指数(BMI)标准参考表 </view>
      <uni-table
        border
        stripe
      >
        <uni-tr>
          <uni-th width="90">BMI分类</uni-th>
          <uni-th width="90">WTO标准</uni-th>
          <uni-th width="90">亚洲标准</uni-th>
          <uni-th width="90">中国标准</uni-th>
        </uni-tr>
        <uni-tr
          v-for="(item, index) in tableData"
          :key="index"
        >
          <uni-td>{{ item.type }}</uni-td>
          <uni-td>{{ item.WTO }}</uni-td>
          <uni-td>{{ item.Asia }}</uni-td>
          <uni-td>{{ item.China }}</uni-td>
        </uni-tr>
      </uni-table>
    </van-popup>
  </view>
</template>

<script>
import moment from 'moment'
import Toast from '../../wxcomponents/vant/dist/toast/toast'
export default {
  data() {
    return {
      tableData: [
        { type: '体重过低', WTO: '<18.5', Asia: '<18.5', China: '<18.5' },
        { type: '正常范围', WTO: '18.5-24.9', Asia: '18.5-22.9', China: '18.5-23.9' },
        { type: '超重', WTO: '25-29.9', Asia: '23-25.9', China: '24-26.9' },
        { type: '肥胖', WTO: '≥30', Asia: '≥26', China: '≥27' }
      ],
      showPopup: false,
      form: {
        height: '',
        weight: '',
        BMI: '',
        value: 2,
        standard: [
          { value: 0, text: 'WTO标准' },
          { value: 1, text: '亚洲标准' },
          { value: 2, text: '中国标准' }
        ]
      },
      Rules: {
        height: {
          rules: [{ required: true, errorMessage: '请填写您的身高' }]
        },
        weight: {
          rules: [{ required: true, errorMessage: '请填写您的体重' }]
        }
      },
      BMIData: uni.getStorageSync('bmi') ? uni.getStorageSync('bmi') : [],
      // 折线图相关配置
      chartData: {},
      opts: {
        color: ['#1890FF'],
        padding: [15, 15, 0, 5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [{ min: 0 }]
        },
        extra: {
          column: {
            type: 'group',
            width: 30,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            linearType: 'custom',
            seriesGap: 5,
            linearOpacity: 0.5,
            barBorderCircle: true,
            customColor: [
              // 渐变色
              '#FA7D8D',
              '#EB88E2'
            ]
          }
        }
      }
    }
  },
  mounted() {
    this.getChartData()
  },
  methods: {
    handleClick(ref) {
      // 非空校验
      if (this.$refs[ref].validate()) {
        // console.log(this.form,this.BMIData, uni.getStorageSync('bmi'),123)
        // BMI计算公式 = 体重(KG) / 身高(M)²
        const height = this.form.height / 100
        this.form.BMI = this.form.weight / (height * height)
        // 防止用户输入除数字以外的字符
        if (isNaN(this.form.BMI)) {
          this.form.weight = this.form.height = ''
          return Toast({
            message: '请输入正确的身高和体重',
            position: 'top'
          })
        }
        this.BMIData.unshift({
          date: moment().format('YYYY-MM-DD HH:mm:ss'),
          height: this.form.height,
          weight: this.form.weight,
          BMI: this.form.BMI.toFixed(1)
        })
        uni.setStorageSync('bmi', this.BMIData)
        this.form.weight = this.form.height = ''
        this.getChartData()
      }
    },
    handleDelete(row) {
      // console.log(row,123)
      this.BMIData = this.BMIData.filter(item => item.date.indexOf(row.date))
      uni.setStorageSync('bmi', this.BMIData)
      this.getChartData()
    },
    // 图表数据
    getChartData() {
      let dateList = this.BMIData.map(item => item.date.substring(11))
      let BMIList = this.BMIData.map(item => item.BMI)
      // console.log(dateList,BMIList,123)
      let res = {
        categories: dateList,
        series: [
          {
            name: 'BMI',
            data: BMIList
          }
        ]
      }
      this.chartData = JSON.parse(JSON.stringify(res))
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  .computing {
    margin-left: 35%;
  }
  .select {
    margin-left: 40rpx;
  }
}
.title {
  margin: 20rpx 0rpx;
  text-align: center;
  font-size: 36rpx;
  color: #909399;
  font-weight: 800;
}
.charts-box {
  width: 100%;
  height: 350rpx;
}
.hidden-canvas {
  transform: translateX(200%); // 图表有层级问题，利用位移暂时移到屏幕外边
}
</style>
